<template>
  <view class="container">
    <view class="header">消息</view>
    <view class="listitem" v-for="item in listdata" :key="item.id" @click="godetail(item.id)">
      <view class="time">{{ item.createtime }}</view>
      <view class="text"><rich-text :nodes="item.content"></rich-text></view>
      <view class="noread" v-if="item.is_read == 0"></view>
    </view>
    <uni-popup ref="popup" type="center">
      <view class="box">
        <view style="box-sizing: border-box; text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000; margin-bottom: 78rpx">
          提示
        </view>
        <view style="text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000; margin-bottom: 74rpx">
          请授权登录后进行留言
        </view>
        <view style="display: flex; justify-content: space-evenly">
          <view class="cancelbtn" @click="$refs.popup.close()">取消</view>
          <view class="shuoquan" @click="shouquan">去授权</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      listdata: []
    };
  },
  onLoad() {},
  onShow() {
    this.getmsglist();
    if (!uni.getStorageSync('token')) {
      console.log('------------');
      this.$refs.popup.open();
    } else {
      this.$refs.popup.close();
    }
  },
  methods: {
    // 授权
    shouquan() {
      uni.switchTab({
        url: '/pages/my/my'
      });
    },
    // 获取消息列表
    async getmsglist() {
      const res = await uni.$http.get('user/getSysNote');
      console.log('------res----', res.data.data);
      this.listdata = res.data.data;
    },
    // 跳转到详情
    godetail(id) {
      uni.navigateTo({
        url: '/pages/messagedetail/messagedetail?id=' + id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .header {
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 180rpx;
    font-size: 36rpx;
    color: #fff;
    padding-left: 30rpx;
    background: linear-gradient(180deg, #058efb 0%, #0274f9 100%);
  }
  .listitem {
    position: relative;
    box-sizing: border-box;
    width: 690rpx;
    height: 162rpx;
    background: #ffffff;
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .time {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-top: 20rpx;
      display: -webkit-box; //对象作为弹性伸缩盒子模型显示
      overflow: hidden; //溢出隐藏
      -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
      -webkit-line-clamp: 2; //设置 块元素包含的文本行数
    }
    .noread {
      position: absolute;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      top: 28rpx;
      right: 30rpx;
      background-color: red;
    }
  }
  .box {
    box-sizing: border-box;
    width: 690rpx;
    height: 400rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding-top: 40rpx;
    .cancelbtn {
      width: 300rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #000000;
      background: #f1f1f1;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
    .shuoquan {
      width: 300rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #fff;
      background: #0278f9;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
